import HeaderComponent from '@/components/HeaderComponent/HeaderComponent';

import { Input, Toast } from 'antd-mobile';
import { FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getData, order } from '@/api/module/STC';
import { CenterPopupComponent } from '@/components/CenterPopupComponent/CenterPopupComponent';
import { getApiToken } from '@/api/module/U2U';

const AssetsComponent: FC<{
  data: Awaited<ReturnType<typeof getData>>['data'];
}> = ({ data }) => {
  const { t } = useTranslation();
  return (
    <div className="mt-4">
      <div className="flex items-center justify-between asstest mx-2 bg-bg-1 py-4 px-4 rounded-xl"></div>
      <div className="value text-white-1 py-12 px-5 bg-custom-gradient-1 rounded-xl relative -top-4 flex items-center justify-center">
        <span className="opacity-50">{t('highestMatchingPrice')}</span>
        <span className="ml-4 font-bold text-2xl">${data.price}</span>
      </div>
    </div>
  );
};
const FormComponent: FC<{
  data: Awaited<ReturnType<typeof getData>>['data'];
}> = ({ data }) => {
  const { t } = useTranslation();
  const [value, setValue] = useState('');
  const [password, setPassword] = useState('');
  const reqOrder = async () => {
    try {
      const res = await order({
        amount: value,
        APITOKEN: APIToken,
        currency: 'GPB',
        password: password,
      });
      console.log(res);
      setAPIToken('');

      Toast.show({
        content: res.msg,
      });
      if (res.code == 0) {
        setValue('');
        setPassword('');
      }
    } catch (error) {
      setAPIToken('');
    }
  };

  const [visible, setVisible] = useState(false);
  const [APIToken, setAPIToken] = useState('');
  const reqApiToken = async () => {
    try {
      if (!value) {
        Toast.show({
          content: t('enterCompleteInformation'),
        });
        return;
      }
      // if (!password) {
      //   Toast.show({
      //     content: '请输入2FA OTP',
      //   });
      //   return;
      // }
      if (!APIToken) {
        const res = await getApiToken();
        setAPIToken(res.data.api_token);
      }

      setVisible(true);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div
      className="mt-4"
      style={{
        fontSize: '95%',
      }}
    >
      <div className="cash">
        <div>{t('amount')}</div>
        <Input
          style={{
            '--font-size': '14px',
            '--color': '#fff',
          }}
          className="bg-bg-1 py-4 mt-3 px-3 rounded-lg "
          placeholder={`${t('enter')}`}
          value={value}
          onChange={(val) => {
            setValue(val);
          }}
        />
        <div className="mt-2 opacity-50 text-xs grid grid-cols-3">
          <span>
            {t('minimum')}: {data.min_amount}
          </span>
          <span>
            {t('highest')}: {data.max_amount}
          </span>
          <span>
            {t('banlance')}: {data.balance}
          </span>
        </div>
        <div className="mt-4 opacity-50 text-xs grid grid-cols-3">
          <span>
            {t('hangingForSale')}: {data.amount_on_sale}
          </span>
          <span>
            {t('matchedAlready')}: {data.amount_macthed}
          </span>
        </div>
      </div>
      <div className="password mt-4">
        <div>{t('secondaryPassword')}</div>
        <Input
          type="password"
          style={{
            '--font-size': '14px',
            '--color': '#fff',
          }}
          className="bg-bg-1 py-4 mt-3 px-3 rounded-lg "
          placeholder={`${t('enter')}`}
          value={password}
          onChange={(val) => {
            setPassword(val);
          }}
        />
      </div>
      <div
        onClick={reqApiToken}
        className="mt-6 bg-bg-16 py-4 rounded-md text-center text-base"
      >
        {t('sell')}
      </div>
      <CenterPopupComponent
        visible={visible}
        setVisible={setVisible}
        title="sell"
        content={`${t('sell')}: ${value}${t('SimuDou')}`}
        onClick={() => reqOrder()}
      />
    </div>
  );
};
export default function DigitalVoucherCenter() {
  const [data, setData] = useState<Awaited<ReturnType<typeof getData>>['data']>(
    {
      price: 0,
      balance: 0,
      min_amount: 0,
      max_amount: 0,
      amount_macthed: 0,
      amount_macthed_market: 0,
      amount_on_sale: 0,
    }
  );
  const reqData = async () => {
    const res = await getData();
    setData(res.data);
  };
  useEffect(() => {
    reqData();
  }, []);
  return (
    <div className="text-white-1 px-4">
      <HeaderComponent
        title="digitalVoucherCenter"
        centerStyle={{
          fontSize: '18px',
        }}
      />
      <AssetsComponent data={data} />
      <FormComponent data={data} />
    </div>
  );
}
